<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Login Screen</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Framework7 comes with ready to use Login Screen layout. It could be used inside of page or inside of popup
          (Embedded) or as a standalone overlay:</p>
      </div>
      <!-- example-hidden-start -->
      <div class="list list-strong inset-md list-outline-ios links-list example-hidden">
        <ul>
          <li>
            <a href="/login-screen-page/">As Separate Page</a>
          </li>
        </ul>
      </div>
      <!-- example-hidden-end -->
      <div class="block">
        <a class="button button-raised button-large button-fill login-screen-open" data-login-screen=".login-screen">As
          Overlay</a>
      </div>
    </div>
    <div class="login-screen">
      <div class="page login-screen-page">
        <div class="page-content login-screen-content">
          <div class="login-screen-title">Framework7</div>
          <form>
            <div class="list">
              <ul>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Username</div>
                    <div class="item-input-wrap">
                      <input type="text" name="username" id="demo-username-1" placeholder="Your username" />
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </li>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Password</div>
                    <div class="item-input-wrap">
                      <input type="password" name="password" id="demo-password-1" placeholder="Your password" />
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list inset">
              <ul>
                <li><a class="list-button" @click=${signIn}>Sign In</a></li>
              </ul>
              <div class="block-footer">Some text about login information.<br />Lorem ipsum dolor sit amet, consectetur
                adipiscing elit.</div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $, $f7 }) => {
    const signIn = () => {
      var username = $('input#demo-username-1').val();
      var password = $('input#demo-password-1').val();
      $f7.dialog.alert('Username: ' + username + '<br />Password: ' + password, function () {
        $f7.loginScreen.close();
      })
    }

    return $render;
  };
</script>